<template>
  <el-container>
    <el-header>
      <h3>发放学习卡</h3>
    </el-header>
    <el-main>
      <el-form ref="form"
               :rules="rule"
               :model="form"
               label-position="right"
               label-width="280px">
        <el-form-item label="手机号码:"
                      prop="phone">
          <el-input v-model="form.phone"
                    type="text"
                    placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item label="姓名:"
                      prop="name">
          <el-input v-model.number="form.name"
                    type="text"
                    placeholder="请输入单位" />
        </el-form-item>

        <el-form-item label="单位:"
                      prop="company"
                      >
          <el-input v-model.number="form.company"
                    type="text"
                    placeholder="请输入单位" />
        </el-form-item>

        <el-form-item label="学习卡次数:"
                      prop="study_num">
          <el-input v-model.number="form.study_num"
                    type="number"
                    min="1"
                    placeholder="请输入学习卡可以学习的次数" />
        </el-form-item>

        <el-form-item label="学习卡到期时间:"
                      prop="end_date">
          <el-date-picker v-model="form.end_date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     icon="el-icon-edit"
                     :loading="loading"
                     @click.prevent="add">添加</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { addRecord } from '@/api/order'
export default {
  name: 'Add',
  inject: ['reload'],
  data () {
    const checkTelephone = (rule, value, callback) => {
      var pattern = /^1\d{10}$/
      if (!pattern.test(value)) {
        callback(new Error('手机号码不正确'))
      } else {
        callback()
      }
    }
    return {
      form: {
        phone: '',
        study_num: '',
        end_date: '',
        company: '',
        name:'',
      },
      rule: {
        phone: [
          { required: true, message: '手机号码为必填项', trigger: 'blur' },
          { validator: checkTelephone, message: '手机号码由11位数字组成', trigger: ['blur', 'change'] }
        ],
        study_num: [
          { required: true, message: '学习卡次数为必填项', trigger: 'blur' },
          { type: 'number', message: '学习卡次数为整数', trigger: 'blur' }
        ],
        end_date: [
          { required: true, message: '到期时间是必填项', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '单位是必填项', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '姓名是必填项', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  mounted () {
  },
  methods: {
    add () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        this.loading = true
        addRecord(this.form).then(response => {
          this.loading = false
          this.$message.success(response.msg)
          this.$router.push({ path: '/order-offline/list' })
        }).catch(err => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style scoped>
.el-container {
  width: 60%;
  max-width: 100%;
  overflow: hidden;
  margin: 10px auto;
  border: 1px solid #f2f6fc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-header {
  text-align: center;
}
.el-header h3 {
  font-size: 20px;
  height: 20px;
  line-height: 20px;
}

.el-main .el-form .el-input {
  width: 50%;
}
</style>
